<template>
  <div class="wangeditor">
    <div id="div1" class="toolbar"></div>
    <div style="padding: 0px 0; color: #ccc">请在下方编辑内容</div>
    <div id="div2" class="text">
      <!--可使用 min-height 实现编辑区域自动增加高度-->
      <!-- <p>请输入内容</p> -->
    </div>
  </div>
</template>

<script>
import E from "wangeditor";
import { ossUpload } from "@/utils/ossUpload";
export default {
  name: "Editor",
  data() {
    return {
      menus: [
        // 'head',  // 标题
        "bold", // 粗体
        "fontSize", // 字号
        "fontName", // 字体
        "italic", // 斜体
        "underline", // 下划线
        "strikeThrough", // 删除线
        "foreColor", // 文字颜色
        "backColor", // 背景颜色
        "link", // 插入链接
        "list", // 列表
        "justify", // 对齐方式
        "quote", // 引用
        "emoticon", // 表情
        "image", // 插入图片
        // 'table',  // 表格
        "undo", // 撤销
        "redo", // 重复
      ],
      editorContent: "",
      editor: null,
    };
  },
  mounted() {
    this.initEditor();
  },
  watch: {
    html(val, oldVal) {
      if (val) {
        this.getHtml();
      }
    },
  },
  beforeDestroy() {
    this.editor && this.editor.txt.clear();
  },
  methods: {
    // 初始化编辑器
    initEditor() {
      let _self = this
      this.editor = new E("#div1", "#div2");
      this.editor.config.menus = this.menus; // menu菜单
      this.editor.config.zIndex = 1;
      this.editor.config.menuFixed = true;
      this.editor.config.customUploadImg = async (files, insert) => {
        const res = await ossUpload(files[0]);
        insert(res.url);
        this.$message.success("上传成功");
      };
      this.editor.config.onchange = (html) => {
        this.editorContent = html;
      };
      this.editor.config.onchange = function (newHtml) {
        _self.$emit('submitArticle',newHtml)
        // console.log("change 之后最新的 html", newHtml);
        // const html = newHtml
        // const safeHtml = xss(html);
        // console.log("处理过 xss 攻击的 html", safeHtml);
        // console.log(xss)
      };
      this.editor.config.onchangeTimeout = 500;
      this.editor.create();
      this.getHtml();
    },
    // 获取html
    async getHtml() {
      if (!this.html) return;
      let html = this.html;
      if (isUrl(this.html)) {
        const res = await CommonServer.getHtml(this.html);
        html = res.data;
      }
      this.$nextTick(() => {
        this.editorContent = html;
        this.editor.txt.html(html);
      });
    },
    // 获取编辑器内容
    getContent() {
     // console.log(this.editorContent);
      // this.$emit('getContent', editor.txt.html())
    },
    // 清除内容
    clearHtml() {
      this.editor && this.editor.txt.clear();
    },
  },
};
</script>
<style type="text/css" scoped>
.toolbar {
  border: 1px solid #ccc;
}
.text {
  border: 1px solid #ccc;
  height: 500px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>